<template class="out">
	<view class="loginLayout">
		
		<view class="logo">
			<view class="ball">
				<image src="../../../static/images/login/apron.png" class="img"></image>
			</view>
			<view class="topLogo">小饮与食</view>
		</view>
		
		<view class='login'>
			<view class="account">
				<view class="Img">
					<image src="../../../static/images/login/fork.png" class="innerImg"></image>
				</view>
				<input type="text" placeholder="请输入您的手机号" maxlength="11" class="input"
				 placeholder-style="color:#2a1105"  v-model="loginInput"/>
			</view>
			
			
			<view class="pwd">
				<view class="Img">
					<image src="../../../static/images/login/spoon.png" class="innerImg"></image>
				</view>
				<view v-if="state">
					<input type="text" placeholder="请输入您的密码" class="input transform"
					 placeholder-style="color:#2a1105" v-model="regInput"/>
				</view>
				<view v-else>
					<input type="password" placeholder="请输入您的密码" class="input transform"
					 placeholder-style="color:#2a1105" v-model="regInput"/>
				</view>
				 <uni-icons  class="pwdIcon" @click="changeState" :type="state?'eye':'eye-slash'" size="25"></uni-icons>
			</view>
			
			<view class="passLog" @click="changeTele">切换登录方式</view>
			<view class="reg">
				<view>没有账号?</view>
				<view class="toReg" @click='toReg'>立即注册</view>
			</view>
			<view >
				<button @click="comfirm" class="btn" hover-class="buttonHover" plain style="">
				 登录</button>
			</view>
			
		</view>
	</view>
</template>

<script>
	import uniIcons from '@/uni_modules/uni-icons/components/uni-icons/uni-icons.vue'
export default {
		components:{
			uniIcons:uniIcons,
		},
		data() {
			return {
				// LogoTextList:[],
				state:true,
				loginInput:"",
				regInput:"",
			}
		},
		methods: {
			changeState(){
				this.state = !this.state;
			},
			changeTele(){
				uni.reLaunch({
					url:"/pages/oterPages/teleLogin/teleLogin"
				})
			},
			toReg(){
				uni.navigateTo({
					url:"/pages/oterPages/Registered/Registered"
				})
			},
			comfirm(){
				if(this.loginInput.length<11 || this.regInput.length==0){
					uni.showToast({
						icon: "none",
						title: "请完整填写后再提交!"
					})
					this.loginInput="";
					this.regInput="";
				}else if(!(/^\d+$/.test(this.loginInput))){
					uni.showToast({
						icon: "none",
						title: "电话号码格式有误!"
					})
					this.loginInput="";
					this.regInput="";
					
				}else{
					//提交请求，判断数据
					uni.reLaunch({
						url:"/pages/home/home"
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
/* #ifdef H5 */
page {
	height: auto;
	min-height: 100%;
}
/* #endif */
.loginLayout{
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	.logo{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 200rpx;
		.topLogo{
			font-size: 130rpx;
			font-weight: 900;
			color: #4c2d1e;
			font-family: "隶书";
		}
	}
	.ball{
		background: #4c2d1e;
		backdrop-filter: blur(300rpx);
		height: 380rpx;
		width: 380rpx;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		.img{
			margin-top: -30rpx;
			height: 350rpx;
			width: 320rpx;
		}
	}
	.login{
		margin-top: 80rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		.account,.pwd{
			height: 105rpx;
			width: 540rpx;
			border:2rpx solid #2a1105;
			border-radius: 100rpx;
			display: flex;
			flex-direction: row;
			box-shadow:20rpx 20rpx 25rpx #2a1105 ;
			.Img{
				margin-left: 20rpx;
				width: 20%;
				height: 100%;
				transform:rotate(20deg);
				display: flex;
				align-items: center;
				justify-content: center;
				.innerImg{
					height: 80rpx;
					width: 65rpx;
					
				}
			}
			.input{
				height: 100%;
				flex: 1;
				color:#2a1105;
				font-size: 30rpx;
				font-family: "华文黑体";
			}
			
		}
		.account{
			margin-bottom: 45rpx;
		}
		.pwd{
			position:relative;
			.pwdIcon{
				width: 15%;
				height: 100%;
				line-height: 105rpx;
			}
			.input{
				width: 95%;
			}
		}
		
		.btn{
			margin: auto;
			margin-top: 15rpx;
			width: fit-content;
			box-shadow:20rpx 20rpx 25rpx #2a1105 ;
			color:#2a1105;
			border: 1px solid #4c2d1e;
			border-radius: 120rpx;
			height: 90rpx;
			width:200rpx;
			font-size:33rpx;
		}
		.buttonHover{
			background: #cea896;
		}
		.reg{
			font-size: 26rpx;
			display: flex;
			flex-direction:row;
			margin-top: 60rpx;
			justify-content: center;
			align-items: center;
			.toReg{
				color: #e1b9ad;
				text-decoration: underline;
				text-underline-offset: 3rpx;
			}
		}
		.passLog{
			margin-top: 60rpx;
			font-size: 30rpx;
			text-decoration: underline;
			text-underline-offset: 5rpx;
		}
	}
}

</style>
